import { defineComponent, inject, reactive } from 'vue'
import './target-node.css'
import dimensionType from '@/assets/images/dimensionType.svg';

export default defineComponent({
  name: 'TargetNode',
  inject: ["getGraph", "getNode"],
  setup: () => {
    const getNode: any = inject('getNode')
    const state = reactive(getNode().getData())
    const { onRevise, onUnbind, ...rest } = state
    getNode().on('change:data', ({ current }: any) => {
      state.isActive = current.isActive
    })
    return () => {
      return (
        <div class={`ax6-target-node ${state.isActive ? 'isActive' : ''}`}>
          <img class="ax6-target-node-field-icon" src={dimensionType} />
          <span class="ax6-target-node-field-name" title={rest.dimensionName}>{rest.dimensionName}</span>
          <span class="ax6-target-node-bind-operate" onClick={() => { onRevise(rest) }}>修改</span>
          <span
            class="ax6-target-node-bind-operate"
            onClick={() => { onUnbind(rest) }}
            style="padding-left: 5px">
            解绑
          </span>
        </div>
      )
    }
  },
})
